// 首页轮播图
import { useEffect, useState} from 'react';
import { DeleteOutlined } from "@ant-design/icons";
import { Button, Image, Popconfirm,Space,Table } from "antd";
import { deleteBanner, getBannerList } from "../../api/banner";
import { useNavigate } from 'react-router-dom';
type ListProps = {}
export const List = (props: ListProps) => {
    const [bannerList, setBannerList] = useState([])
    
    const [current, setCurrent] = useState(1)
    const [pageSize, setPageSize] = useState(4)

    async function getData() {
        const res = await getBannerList()
        setBannerList(res.data.data)
    }
    useEffect(() => {      
        getData()
    },[])
    const navigate = useNavigate()
    return (
        <Space direction='vertical' style={{width:'100%'}}>
            <Button type='primary' onClick={() => {
                navigate('/banner/add')
            }}>添加轮播图</Button>
            <Table
                dataSource={bannerList}
                rowKey='bannerid'
                scroll={{y:document.body.offsetHeight - 330}}
                bordered
                pagination={{
                    current,
                    pageSize,
                    onChange(page,pageSize){
                        setCurrent(page)
                        setPageSize(pageSize)
                    }
                }}
            >
               <Table.Column
                    title="序号"
                    render={(text, record, index) => { return <span>{(current - 1) * pageSize + index + 1}</span> }}
                ></Table.Column> 
                <Table.Column
                    title="图片"
                    dataIndex="img"
                    render={(text) => { return <Image src={text} width={150} height={75} /> }}
                ></Table.Column>
                <Table.Column
                    title="提示信息"
                    dataIndex="alt"
                ></Table.Column>
                <Table.Column
                    title="链接地址"
                    dataIndex="link"
                ></Table.Column>
                <Table.Column
                    title="操作"
                    render={(text, record:any, index) => {
                        return (
                        <Space>
                            <Popconfirm
                            title="确定删除吗?"
                            onConfirm={async() => {
                                await deleteBanner({bannerid:record.bannerid})
                                getData()
                            }}
                            onCancel={() => { }}
                            okText="确定"
                            cancelText="再想想"
                            >
                            <Button danger shape="circle" icon={<DeleteOutlined />} />
                            </Popconfirm>
                        </Space>
                        )
                    }}
                ></Table.Column>
            </Table>
        </Space>
    )
}